<template>
	<div class="main">
		<div class="wrap">
			<!-- 头 -->
			<div class="header">
				<img src="../../assets/images/logo.png" class="left">
				<div class="right">
					<h3>体质检测报告</h3>
					<p>{{schoolName}}</p>
				</div>
			</div>
			<!-- 信息 -->
			<ul class="info">
				<li>
					<span class="left">姓名：</span>
					<span>{{name}}</span>
				</li>
				<li style="width:40% ;">
					<span class="left">班级：</span>
					<span>{{className}}</span>
				</li>
				<li style="width:25% ;text-align: center;">
					<span class="left">性别：</span>
					<span>{{sex}}</span>
				</li>
			</ul>
			<ul class="info">
				<li style="width:75% ;">
					<span class="left">学号：</span>
					<span>{{edu}}</span>
				</li>
			</ul>
			<ul class="info">
				<li style="width:75% ;">
					<span class="left">生成时间：</span>
					<span>{{timer}}</span>
				</li>
			</ul>
			<!-- list -->
			<ul class="list">
				<li v-for="item in formData" :key="item.rank">
					<div class="top" v-if="item.rank == '及格'||item.rank == '正常'||item.rank == '良好'||item.rank == '优秀'">
						<span>{{item.result}}</span>
						<i class="green" v-if="item.itemName == 'BMI'"></i>
						<i class="green" v-if="item.itemName == '肺活量'">ml</i>
						<i class="green" v-if="item.itemName == '坐位体前屈'">cm</i>
						<i class="green" v-if="item.itemName == '立定跳远'">cm</i>
						<i class="green" v-if="item.itemName == '仰卧起坐'">次</i>
						<i class="green" v-if="item.itemName == '50米跑'">s</i>
						<i class="green" v-if="item.itemName == '800米跑'">s</i>
						<i class="green" v-if="item.itemName == '1000米跑'">s</i>
					</div>
					<div class="top" v-else>
						<span>{{item.result}}</span>
						<i class="green" v-if="item.itemName == 'BMI'"></i>
						<i class="green" v-if="item.itemName == '肺活量'">ml</i>
						<i class="green" v-if="item.itemName == '坐位体前屈'">cm</i>
						<i class="green" v-if="item.itemName == '立定跳远'">cm</i>
						<i class="green" v-if="item.itemName == '仰卧起坐'">次</i>
						<i class="green" v-if="item.itemName == '50米跑'">s</i>
						<i class="green" v-if="item.itemName == '800米跑'">s</i>
						<i class="green" v-if="item.itemName == '1000米跑'">s</i>
					</div>
					<div class="middle">
						<span class="bggreen" v-if="item.rank == '及格'||item.rank == '正常'||item.rank == '良好'||item.rank == '优秀'">{{item.rank}}</span>
						<span class="bgred" v-else>{{item.rank}}</span>
					</div>
					<div class="bottom">
						<span>{{item.itemName}}</span>
					</div>
				</li>
			</ul>
			<!-- 提示语 -->
			<p class="msg" v-if="score == '合格'"><b>{{name}}</b>同学，在此次体质测评中，你的检测结果显示，你体质体能{{score}}，希望你以后再接再厉，真棒！</p>
			<p class="msg" v-else><b>{{name}}</b>同学，在此次体质测评中，你的检测结果显示，你体质体能{{score}}，希望你以后加强锻炼，加油呀！</p>
			<!-- 分数 -->
			<div class="score">
				<div class="cir">
					<div class="children">
						<span>{{zonghe}}</span>
						<!-- <i>分</i> -->
					</div>
				</div>
				<ul class="right">
					<li>
						<div class="graph">
							<h3 class="title">班级综合排名：</h3>
							<cmsProgress 
								rate="50" 
								height="0.1" 
								color="#84B7FF">
							</cmsProgress>
						</div>
						<div class="data">{{classRank}}</div>
					</li>
					<li>
						<div class="graph">
							<h3 class="title">年级综合排名：</h3>
							<cmsProgress 
								rate="50" 
								height="0.1" 
								color="#84B7FF">
							</cmsProgress>
						</div>
						<div class="data">{{gradeRank}}</div>
					</li>
					<li>
						<div class="graph">
							<h3 class="title">体质综合评估：</h3>
							<cmsProgress 
								rate="50" 
								height="0.1" 
								color="#84B7FF">
							</cmsProgress>
						</div>
						<div class="data">{{score}}</div>
					</li>
				</ul>
			</div>
			<!-- echarts -->
			<div id="myChart" style="width: 100%;height:200px;margin-bottom: 15px;"></div>
			<!-- 法律免责 -->
			<div class="footer">
				<h3>法律免责</h3>
				<p>以上数据标准参照教育部《学生体质健康评价办法》之检测标准执行。上述数据仅供参考数据，不做医学诊断使用。</p>
				<p>本中心不承担由此产生联带责任,根据需要请到医院或医学检测机构做进一步检查。</p>
				<p>数据来源:“学壮壮”健康大数据中心</p>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
	data () {
		return {
			//header
			name:"",
			edu:"",
			sex:"",
			schoolName:"",
			gradeName:"",
			className:"",
			timer:"",
			
			//成绩
			formData:[],
			zonghe:"",
			
			//echarts
			x:[],
			y:[],

			//分数
			bfb:50, //进度%
			classRank:"",
			gradeRank:"",
			score:"", //不合格
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/report',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
					annual:this.common.getCookie('year'),
				}
			})
			.then(res=>{
				console.log(res);
				if(res.data.code == 1){
					this.name = res.data.data.scStudent.studentName; //姓名
					this.sex = res.data.data.scStudent.sex; //性别
					this.schoolName = res.data.data.schoolName; //学校
					this.gradeName = res.data.data.scStudent.gradeName; //年级
					this.className = res.data.data.scStudent.className; //班级
					this.edu = res.data.data.scStudent.studentCode; //学籍号
					this.timer = res.data.data.scStudent.createTime; //时间
					this.formData = res.data.data.scScores; //成绩
					this.zonghe = res.data.data.score.toFixed(0); //综合成绩
					this.score = res.data.data.evaluate; //及格，不及格
					this.classRank = res.data.data.classRank; //班级排名
					this.gradeRank = res.data.data.gradeRank; //年级排名
				}
			})
			
			//echarts
			this.$axios.get('/physical/tzHistory',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					let  t = res.data.data;
					t.map(o=>{
						this.x.push(o.annual);
						this.y.push(o.zonghe);
					})
					this.myEcharts(); //初始化图表
				}
			})
		},
		//初始化图表
		myEcharts:function(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				xAxis: {
					type: 'category',
					data: this.x
				},
				yAxis: {
					type: 'value'
				},
				grid:{
					left:'3%',
					top:'3%',
					right:'3%',
					bottom:'3%',
					containLabel:true
				},
				series: [{
					data: this.y,
					type: 'bar',
					itemStyle:{
						normal:{
							color:'#2082FF'
						}
					}
				}]
			});
		},
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "体质检测报告";
	}
}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #fff;
		.wrap{
			padding: 15px;
		}
	}
	//头
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 15px;
		border-bottom: 2px solid #858585;
		.left{
			height: 0.4rem;
		}
		.right{
			text-align: right;
			h3{
				color: #000;
				font-weight: bold;
				font-size: 15px;
			}
			p{
				color: #999;
				font-size: 14px;
			}
		}
	}
	//信息
	.info{
		margin-top: 10px;
		display: flex;
		li{
			width: 33.3%;
			text-align: left;
			.left{
				color: #666;
			}
		}
	}
	//list
	.list{
		display: flex;
		flex-wrap: wrap;
		padding: 0.25rem 0;
		li{
			border-right: 1px solid #dedede;
			border-bottom: 1px solid #dedede;
			padding: 15px 0;
			width: 33.3%;
			text-align: center;
			box-sizing: border-box;
			.top{
				span{
					color: #606165;
					font-size: 18px;
					font-weight: bold;
				}
				i{
					font-size: 12px;
					margin-left: 4px;
				}
			}
			.middle{
				text-align: center;
				margin: 4px 0 10px 0;
				span{
					padding: 4px 8px;
					color: #fff;
					border-radius: 4px;
					font-size: 12px;
				}
			}
			.bottom{
				color: #666;
				font-size: 13px;
				span{
					margin: 0 4px;
				}
			}
		}
		li:nth-child(1){
			width: 33.3%;
		}
		li:nth-child(2){
			width: 33.3%;
		}
		li:nth-child(3){
			width: 33.3%;
			border-right: none;
		}
		li:nth-child(4){
			width: 25%;
			border-bottom: none;
		}
		li:nth-child(5){
			width: 25%;
			border-bottom: none;
		}
		li:nth-child(6){
			width: 25%;
			border-bottom: none;
		}
		li:nth-child(7){
			width: 25%;
			border-bottom: none;
			border-right: none;
		}
	}
	//提示语
	.msg{
		color: #666;
		b{
			margin-right: 4px;
			font-size: 17px;
		}
	}
	//分数
	.score{
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0;
		.cir{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.2rem;
			height: 1.2rem;
			background: linear-gradient(#41A76C, #48A5B3);
			border-radius: 50%;
			.children{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 0.9rem;
				height: 0.9rem;
				background-color: #fff;
				border-radius: 50%;
				span{
					color: #58595D;
					font-size: 30px;
					font-weight: bold;
				}
				i{
					margin-top: 10px;
					margin-left: 4px;
					font-size: 18px;
					color: #58595D;
				}
			}
		}
		.right{
			width: calc(100% - 1.4rem);
			margin-left: 0.2rem;
			.title{
				font-size: 14px;
				color: #666;
				padding-bottom: 4px;
			}
			li{
				display: flex;
				align-items: flex-end;
				margin-bottom: 0.1rem;
				.graph{
					width: 60%;
				}
				.data{
					text-align: center;
					width: 40%;
					font-size: 14px;
				}
			}
		}
	}
	.footer{
		padding: 15px 0;
		border-top: 2px solid #858585;
		h3{
			padding-bottom: 4px;
			font-size: 15px;
		}
		p{
			font-size: 12px;
			color: #666;
		}
	}
	.yellow{color: #F3A649;}
	.bgyellow{background-color: #F3A649;}
	.green{color: #3EA841;}
	.bggreen{background-color: #3EA841;}
	.red{color: #ED513F;}
	.bgred{background-color: #ED513F;}
</style>